<template>
  <a-card class="j-address-list-right-card-box"   :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" :model="queryParam">

        <a-row :gutter="10">
          <a-col :md="6" :sm="12">
            <a-form-model-item label="名称" prop="listname" style="margin-left:8px">
              <a-input placeholder="请输入歌单专辑名称查询" v-model="queryParam.listname"></a-input>
<!--              <j-input placeholder="输入名称模糊查询" v-model="queryParam.listname"></j-input>-->
            </a-form-model-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="类型">
              <a-select v-model="queryParam.listType" placeholder="请选择">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="01">歌单</a-select-option>
                <a-select-option value="02">专辑</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 18px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button type="primary" icon="plus" @click="handleAdd">添加</a-button>
      <a-button icon="delete" @click="batchDel">删除</a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{x:1000}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
      >
        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
          </div>
        </template>
        <span slot="action" slot-scope="text, record">
           <a href="javascript:;" @click="queryDetail(record.id,record.listname)">曲目设置</a>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a  @click="handleEdit(record)">编辑</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <list-modal ref="modalForm" @ok="modalFormOk"></list-modal>
    <song-list-add-model v-if="detailVisible" ref="listSongs"></song-list-add-model>
  </a-card>
</template>

<script>
  import moment from 'moment'
  import { getAction,getFileAccessHttpUrl } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import ListModal from './ListModal'
  import JSelectCategory from '../../tools/JSelectCategory'
  import SongListAddModel from './SongListAddModel'
  export default {
    name: 'SongsListRight',
    mixins: [JeecgListMixin],
    components: { ListModal,JInput,JSelectCategory,SongListAddModel },
    props: ['value'],
    data() {
      return {
        description: '歌单信息',
        cardLoading: true,
        detailVisible: false,
        url: {
          list: '/mus/albumorsonglist/queryByMusCodeForAlbumSongList',
          delete: "/mus/albumorsonglist/delete",
          deleteBatch: "/mus/albumorsonglist/deleteBatch",
        },
        columns:[
          {
            title: '封面',
            align: "center",
            width: 100,
            dataIndex: 'avatar',
            scopedSlots: {customRender: "avatarslot"}
          },
          {
            title: '名称',
            align: "left",
            dataIndex: 'listname',
            width: 200,
            ellipsis: true,
          },
          {
            title: '分类',
            align: "center",
            width: 100,
            dataIndex: 'listType_dictText',
            ellipsis: true,
          },
          {
            title: '所属类别',
            align: "center",
            width: 200,
            dataIndex: 'categoryIds_dictText',
            ellipsis: true,
          },
          {
            title: '基本信息',
            align: "center",
            width: 200,
            dataIndex: 'description',
            ellipsis: true,
          },
          {
            title: '推荐级别',
            align: "center",
            width: 150,
            dataIndex: 'level_dictText',
            ellipsis: true,
          },

          {
            title: '出品公司',
            align: "center",
            width: 100,
            dataIndex: 'record',
            ellipsis: true,
          },
          {
            title: '歌手',
            align: "center",
            width: 120,
            dataIndex: 'artistId_dictText',
            hidden: false,
            ellipsis: true,
          },
          {
            title: '流派',
            align: "center",
            width: 100,
            dataIndex: 'genre',
            ellipsis: true,
          },
          {
            title: '语种',
            align: "center",
            width: 100,
            dataIndex: 'language',
            ellipsis: true,
          },
          {
            title: '出版时间',
            align: "center",
            width: 100,
            dataIndex: 'publishDate'
          },
          {
            title: '排序',
            align: "center",
            width: 80,
            dataIndex: 'listOrder',
            sorter: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 150,
            fixed: 'right'
          }
        ]
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(musCode) {
          this.dataSource = []
          this.loadData(1, musCode)
        }
      },
    },
    methods: {
      moment,
      queryDetail(listId,listname){
        this.detailVisible = true;
        this.$nextTick(() => {
          this.$refs.listSongs.loadData(listId,listname);
        });
      },
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      loadData(pageNum, musCode) {
        this.loading = true
        if (pageNum === 1) {
          this.ipagination.current = 1
        }
        // update-begin- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
        if (!musCode) {
          getAction(this.url.list, {
            ...this.getQueryParams()
          }).then((res) => {
            if (res.success) {
              this.dataSource = res.result.records
              this.ipagination.total = res.result.total
            }
          }).finally(() => {
            this.loading = false
            this.cardLoading = false
          })
          // update-end- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
        }else{
          //加载数据 若传入参数1则加载第一页的内容
          getAction(this.url.list, {
            musCode,
            ...this.getQueryParams()
          }).then((res) => {
            if (res.success) {
              this.dataSource = res.result.records
              this.ipagination.total = res.result.total
            }
          }).finally(() => {
            this.loading = false
            this.cardLoading = false
          })
        }
      },

      searchQuery() {
        this.loadData(1, this.value)
      },
      searchReset() {
        this.queryParam = {}
        this.loadData(1, '')
      },

      handleTableChange(pagination, filters, sorter) {
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        this.loadData(null, this.value)
      },

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>
<style>
  .j-address-list-right-card-box .ant-table-placeholder {
    min-height: 46px;
  }
</style>
<style scoped>
  .j-address-list-right-card-box {
    height: 100%;
    min-height: 300px;
  }
</style>